<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <div>
        <a href="https://www.baidu.com/">111</a>
    </div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 1. e 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);

        //     })

        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

        //阻止事件默认行为
        var a = document.querySelector('a')
        a.addEventListener('click',function(e){
            e.preventDefault()  //DOM推荐的标准写法 这是一个方法
            //但是有兼容性问题,IE9以上才支持
            //低版本用 e.returnValie 这是一个属性
            //也可以用 return false 而且没有兼容性问题
            //但是会有一个问题:后面的代码就不跑了
        })

        //阻止事件冒泡方法: e.stopPropagation(); DOM推荐的标准写法
        //这个也有兼容性问题
        //低版本可以用这个属性: e.cancelBubble = true; 非标准

        //事件委托(事件委派,事件代理)
        //核心原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点
        
        //鼠标右键菜单: contextmenu
        //鼠标选中: selectstart

        //鼠标事件对象
        // 1. client 鼠标在 可视区 的x(clientX)和y(clientY)坐标
        //      无视页面滚动(同一地方页面向下滑动后,坐标不变)

        // 2. page 鼠标在页面文档的x(pageX)和y(pageY)坐标
        //      会被页面滚动所影响,返回的坐标是相对于整个页面的
        //         有兼容性问题 IE9以上才会支持

        // 3. screen 鼠标在 电脑屏幕 的x(screenX)和y(screenY)坐标

        //常用键盘事件
        //1. keyup 按键弹起的时候触发 不能识别字母大小写
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头 不能识别字母大小写
        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头 能识别字母大小写
        // 4. 三个事件的执行顺序  keydown --> keypress --> keyup
    </script>
</body>

</html>